<template>
  <div class="content">
    <div class="point-content">
      <div class="common-sub-title">
        <img src="~assets/img/icon_detail.png" alt="培育统计">
        <span>建点说明</span>
      </div>
      <div class="point-descr">
        <div class="point-descr-title">
          <ol>
            <li>本次建点奖励，不同等级的会员，建点层数及建点个数有限制。</li>
            <li>等级说明</li>
          </ol>
        </div>
        <div class="point-list tc">
          <ul class="point-list-title">
            <li>级别</li>
            <li>层数</li>
            <li>点数</li>
          </ul>
          <div class="point-list-item">
            <ul>
              <li class="flex-li" v-for="(item, index) in rules" :key="index"><span v-text="item.level_name"></span><span v-text="item.level_num"></span><span v-text="item.level_points"></span> </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <v-remark></v-remark>
  </div>
</template>

<script>
import remark from 'src/common/remark'
export default {
  components: {
    'v-remark': remark
  },
  data () {
    return {
      rules: [
        {
          level_id: 1,
          level_num: 6,
          level_points: 126,
          level_bonus: 3780,
          level_name: '银卡'
        },
        {
          level_id: 2,
          level_num: 8,
          level_points: 512,
          level_bonus: 15360,
          level_name: '金卡'
        },
        {
          level_id: 3,
          level_num: 10,
          level_points: 2048,
          level_bonus: 61440,
          level_name: '钻卡'
        },
        {
          level_id: 4,
          level_num: 12,
          level_points: 8192,
          level_bonus: 245760,
          level_name: 'vip卡'
        }
      ]
    }
  }
}
</script>
<style scoped lang='scss'>
  @import '~lib/reset.scss';
  .point-content {
    background-color: #fff;
    margin-top: 10px;
    .common-sub-title {
      padding: 16px;
    }
    .point-descr {
      .point-descr-title {
        padding:16px;
        ol {
          list-style: decimal;
          padding: 0 16px;
          li {
            font-size: $font-15;
            line-height: 2;
          }
        }
      }
      .point-list {
        .point-list-title {
          display: flex;
          justify-content: center;
          align-items: center;
          border-top: 1px solid #e5e5e5;
          li{
            flex: 1;
            padding: 16px 0;
            &:not(:last-child) {
              border-right: 1px solid #e5e5e5;
            }
          }
        }
        .point-list-item {
          ul {
          }
        }
      }
    }
  }
</style>
